var UpdateTemplBtn = function () {
  var TemplForm = function () {
    var template = /* html */ `
      <div class="templ-form" v-loading.fullscreen.lock="loading">
        <div>
          <el-input size="small" v-model="name" placeholder="请输入模板名称"></el-input>
        </div>
        <div style="margin-top:5px;text-align:center">
          <el-button size="small" type="primary" @click="ensure">确定</el-button>
        </div>
      </div>
    `;

    return {
      props: {
        order: {
          type: Object,
          required: true
        }
      },

      data: function () {
        return {
          loading: false,
          name: this.order.name
        };
      },

      methods: {
        ensure: function () {
          var name = this.name;
          if (name.trim() === '') {
            this.$alert('请输入模板名称', '信息');
            return;
          }

          var tempId = this.order.id;
          this.loading = true;
          var self = this;
          ajaxRequest('orderProcedureTemplate/updateTempName', {
            tempId: tempId,
            name: name
          }).then(function () {
            self.$emit('update-success', name);
            self.loading = false;
          }).catch(function () {
            self.loading = false;
          });
        }
      },

      template: template
    };
  }();

  var template = /* html */ `
    <el-popover v-model="isShow" title="修改模板名称" placement="bottom" trigger="click" width="200px">
      <el-button size="mini" type="warning" slot="reference">修改名称</el-button>
      <templ-form v-if="isShow" :order="order" @update-success="updateSuccess"></templ-form>
    </el-popover>
  `;

  return {
    props: {
      order: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        isShow: false
      };
    },

    methods: {
      updateSuccess: function (name) {
        this.order.name = name;
        this.isShow = false;
      }
    },

    components: {
      TemplForm: TemplForm
    },

    template: template
  };
}();
